<template>
  <d-drag direction="y">
    <div class="data-console">
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane
            v-for="tab in tabs"
            :label="tab.label"
            :name="tab.component"
            :key="tab.component"
          >
            <span v-if="activeName === tab.component && tab.showIcon" slot="label"
              >{{ tab.label }}<i class="el-icon-refresh" @click="refresh"></i
            ></span>
          </el-tab-pane>
        </el-tabs>
      </div>
      <keep-alive>
        <component :is="activeName"></component>
      </keep-alive>
    </div>
  </d-drag>
</template>
<script>
import { mapState } from "vuex";
// task 实时日志
import TaskLog from "../task/task-log";
// task 运行记录
import TaskHistory from "../task/task-history";
// task 所属工作流
import TaskWorkflow from "../task/task-workflow";

// workflow 运行记录
import WorkflowHistory from "../workflow/workflow-history";
// workflow 批量回填
import WorkflowBackfill from "../workflow/workflow-backfill";

// workflow 子工作流
import WorkflowChildren from "../workflow/workflow-children";

export default {
  name: "DataConsole",
  components: {
    TaskLog,
    TaskHistory,
    TaskWorkflow,
    WorkflowBackfill,
    WorkflowHistory,
    WorkflowChildren
  },
  data() {
    return {
      activeName: ""
    };
  },
  computed: {
    ...mapState({
      currentTab: ({ data }) => data.currentTab
    }),
    tabs() {
      if (this.currentTab.menuType === 0) {
        // 控制台加载 task 对应组件
        return [
          { label: "日志", component: "task-log", showIcon: true },
          { label: "运行记录", component: "task-history", showIcon: true },
          { label: "所属工作流", component: "task-workflow" }
        ];
      } else {
        // 控制台加载 workflow 对应组件
        return [
          { label: "运行记录", component: "workflow-history", showIcon: true },
          { label: "批量回填", component: "workflow-backfill", showIcon: true },
          { label: "子工作流", component: "workflow-children" }
        ];
      }
    }
  },
  watch: {
    ["currentTab.menuType"]: {
      handler(val) {
        if (val === 0) {
          this.activeName = "task-log";
        } else {
          this.activeName = "workflow-history";
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name == "task-log"){
        this.$bus.$emit(`refresh-${this.activeName}`);
      }
    },
    refresh() {
      this.$bus.$emit(`refresh-${this.activeName}`);
    }
  }
};
</script>
<style lang="scss">
.data-console {
  margin-top: 4px;
  position: relative;
  background: #fff;
  border-top: 1px solid #e4e7ed;
  height: 100%;
  .el-tabs__header {
    margin: 0;
  }

  .data-console-toggle {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    &:hover {
      cursor: pointer;
    }
  }
  // .el-icon-refresh {
  //   margin-left: 4px;
  // }
}
</style>
